<!-- Functions -->
<!-- Author: Edwin -->
<template>
  <div class='c-functions'>
    <el-tabs tab-position="left"
             style="height:100%;">
      <el-tab-pane v-for="item in functionList"
                   :key="item.code">
        <div slot="label">
          {{ item.name }}
          <el-switch v-model="item.enable">
          </el-switch>
        </div>
        <div class="c-functions-pane">
          <div class="c-functions-pane-header">
            <div class="c-functions-pane-header-title">{{ item.title }}</div>
            <el-button type="primary"
                       plain
                       size="mini">{{ $t('custom.test') }}</el-button>
          </div>
          <div class="c-functions-pane-other">
            <div class="c-functions-pane-other-tips">{{ item.description || 'No description' }}</div>
            <div class="c-functions-pane-other-log-time">{{ `${$t('custom.bots.updatedDate')}:  ${item.updateTime || ''}` }}</div>
            <div class="c-functions-pane-other-version">{{ `${$t('custom.bots.version')}:  ${item.version}` }}</div>
            <div class="c-functions-pane-other-author">{{ `${$t('custom.bots.author')}:  ${item.author || 'MSPbots'}` }}</div>
          </div>
          <template v-if="item.code === 'NotEnoughWords'">
            <div class="c-functions-pane-content">
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">Travel：</div>
                <el-input size="mini"
                          v-model="item.config.travel"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">HoursTime: </div>
                <el-input size="mini"
                          v-model="item.config.hoursTime"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">NotesNum: </div>
                <el-input size="mini"
                          v-model="item.config.notesNum"></el-input>
              </div>
            </div>
          </template>
          <template v-if="item.code === 'NoNextStep'">
            <div class="c-functions-pane-content">
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">Travel：</div>
                <el-input size="mini"
                          v-model="item.config.travel"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">HoursTime: </div>
                <el-input size="mini"
                          v-model="item.config.hoursTime"></el-input>
              </div>
            </div>
          </template>
          <template v-if="item.code === 'NoAgreementAttached'">
            <div class="c-functions-pane-content">
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">Travel：</div>
                <el-input size="mini"
                          v-model="item.config.travel"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">HoursTime: </div>
                <el-input size="mini"
                          v-model="item.config.hoursTime"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">NotesNum: </div>
                <el-input size="mini"
                          v-model="item.config.notesNum"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">NotesNum: </div>
                <el-input size="mini"
                          v-model="item.config.notesNum"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">NotesNum: </div>
                <el-input size="mini"
                          v-model="item.config.notesNum"></el-input>
              </div>
            </div>
          </template>
          <template v-if="item.code === 'Overlapped'">
            <div class="c-functions-pane-content">
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">Travel：</div>
                <el-input size="mini"
                          v-model="item.config.travel"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">HoursTime: </div>
                <el-input size="mini"
                          v-model="item.config.hoursTime"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">NotesNum: </div>
                <el-input size="mini"
                          v-model="item.config.notesNum"></el-input>
              </div>
            </div>
          </template>
          <template v-if="item.code === 'IncludingWords'">
            <div class="c-functions-pane-content">
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">NotesNum: </div>
                <el-input size="mini"
                          v-model="item.config.notesNum"></el-input>
              </div>
            </div>
          </template>
          <template v-if="item.code === 'TicketInProgress'">
            <div class="c-functions-pane-content">
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">Travel：</div>
                <el-input size="mini"
                          v-model="item.config.travel"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">HoursTime: </div>
                <el-input size="mini"
                          v-model="item.config.hoursTime"></el-input>
              </div>
              <div class="c-functions-pane-content-item">
                <div class="c-functions-pane-content-item-lable">NotesNum: </div>
                <el-input size="mini"
                          v-model="item.config.notesNum"></el-input>
              </div>
            </div>
          </template>
          <div class="c-functions-pane-footer">
            <el-button size="mini"
                       type="primary">{{ $t('custom.save') }}</el-button>
            <el-button size="mini">{{ $t('cancel') }}</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    sysBotId: {
      type: Number,
      default: null
    },
    tenantCode: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      functionList: [
        {
          code: 'NotEnoughWords',
          name: 'Not Enough Words',
          switch: true,
          base: {
            title: 'NotEnoughWords',
            tips: 'Shopping designed around youShopping designed around you......',
            logTime: '2016-02-23',
            version: '1.0.11',
            author: 'nobody'
          },
          config: {
            travel: '',
            hoursTime: '2',
            notesNum: 100
          }
        },
        {
          code: 'NoNextStep',
          name: 'No Next Step',
          switch: false,
          base: {
            title: 'NoNextStep',
            tips: 'Shopping designed around youShopping designed around you......',
            logTime: '2016-02-23',
            version: '3.2.05',
            author: 'edwin'
          },
          config: {
            travel: '',
            HoursTime: '',
            NotesNum: 0
          }
        },
        {
          code: 'NoAgreementAttached',
          name: 'No Agreement Attached',
          switch: true,
          base: {
            title: 'NoAgreementAttached',
            tips: 'Shopping designed around youShopping designed around you......',
            logTime: '2016-02-23',
            version: '3.2.05',
            author: 'edwin'
          },
          config: {
            travel: '',
            HoursTime: '',
            NotesNum: 0
          }
        },
        {
          code: 'Overlapped',
          name: 'Overlapped',
          switch: false,
          base: {
            title: 'Overlapped',
            tips: 'Shopping designed around youShopping designed around you......',
            logTime: '2016-02-23',
            version: '3.2.05',
            author: 'edwin'
          },
          config: {
            travel: '',
            HoursTime: '',
            NotesNum: 0
          }
        },
        {
          code: 'IncludingWords',
          name: 'Including Words',
          switch: true,
          base: {
            title: 'IncludingWords',
            tips: 'Shopping designed around youShopping designed around you......',
            logTime: '2016-02-23',
            version: '3.2.05',
            author: 'edwin'
          },
          config: {
            travel: '',
            HoursTime: '',
            NotesNum: 0
          }
        },
        {
          code: 'TicketInProgress',
          name: 'TicketIn Progress',
          switch: true,
          base: {
            title: 'TicketInProgress',
            tips: 'Shopping designed around youShopping designed around you......',
            logTime: '2016-02-23',
            version: '3.2.05',
            author: 'edwin'
          },
          config: {
            travel: '',
            HoursTime: '',
            NotesNum: 0
          }
        }
      ]
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$interface.bots.getTenantScriptListApi({ botId: this.sysBotId, tenantId: this.tenantCode })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.functionList = res.data
        }).catch(() => { })
    }
  }
}
</script>

<style scoped lang="scss">
@import "./console.scss";
</style>
